<template>
  <div class="container-login">
    <div class="login-tip">这边是广告图片，上面有注册同意链接</div>
    <div class="login-view">
       <div class="view-show">
         <h1>欢迎登陆</h1>
         <div class="login-pane">
           <input type="text" name="username" id="username" v-model="username" placeholder="用户名/手机号"/>
           <input type="password" name="password" id="password" v-model="password" style="margin-top: 30px;" placeholder="密码"/>
           <button class="submit-button" @click="submitLogin">登陆</button>
         </div>
       </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent,reactive,toRefs,onMounted} from 'vue';
import Encrypt from '../../../../utils/crypto'
export default defineComponent({
  name: "loginContainer",
  props:{
  },
  setup(props,context){
    const parent = {...context}
    const data = reactive({
       username:'',
       password:'',
       submitLogin: async () => {
         parent.emit('login',{"username":data.username,"password": Encrypt.encrypt(data.password)});
       }
    });
    return {
      ...toRefs(data)
    }
  }
})
</script>

<style scoped>
.container-login{
  height: 100%;
  display: flex;
  flex-flow: row;
}
.login-tip {
  flex: 1;
  height: 100%;
  background-color: gray;
}
.login-view {
  flex: 1.2;
  height: 100%;
  background-color: #ffffff;
}
.view-show{
  padding: 30px;
}
.view-show h1{
  font-weight: bold;
  margin-bottom: 30px;
}
.login-pane{
  width: 70%;
  margin-right: auto;
  margin-left: auto;
}

.login-pane input{
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #9ca3af;
  padding-left: 15px;
  border: #888888 1px solid;
}
.login-pane input:focus{
  outline: none;
}
.submit-button{
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  margin-top: 30px;
  background: linear-gradient(90deg,rgba(247,183,51, 1) 0%,rgba(252,74,26, 1) 100%);
  color: #ffffff;
  border: #ffffff 0px solid;
  box-shadow: none;
}
.submit-button:focus{
  outline: none;
}
</style>
